<template>
    <theme-box title="广告添加">
        <form class="form-inline" @submit.prevent v-el:form>
            <div class="box-body">
                <form-input title="名称" :required="true" name="name"></form-input>
                <form-group title="图片" :required="true" name="file">
                    <file-upload v-ref:fileupload class="fileImg"></file-upload>
                </form-group>
                <form-input title="简介" name="about"></form-input>
                <form-input title="顺序" :required="true" name="seq"></form-input>
                <form-select title="类型" :required="true" name="linkType" id=“linkType” :options="typeOptions" :value.sync="typeValue"></form-select>
                <form-input title="关联URL" name="linkUrl" id="linkUrl"></form-input>
                <form-group title="关联文章" v-show="this.tpe == 'find'">
                    <select name="linkDocId" class="form-control" id="linkDocId">
                        <option v-for="doc in docList" :value="doc.value">
                            {{doc.key}}
                        </option>
                    </select>
                </form-group>
                <form-group title="关联商户" v-show="this.tpe == 'mcht'">
                    <select name="linkMchtId" class="form-control">
                        <option v-for="mcht in mchtList" :value="mcht.value">
                            {{mcht.key}}
                        </option>
                    </select>
                </form-group>
            </div>
            <!-- /.box-body -->
            <div class="box-footer">
                <v-button type="reset" @click="reset">重置</v-button>
                <v-button type="submit" theme="primary" class="pull-right">确认</v-button>
            </div>
            <!-- /.box-footer -->
        </form>
    </theme-box>
</template>

<script>
    import 'plugins/jquery-validation';
    import {
        dateTime
    } from 'ui/collections/general.js'

    var serialize = require('form-serialize');

    export default {
        data: () => ({
            tpe:'',
            typeValue: "", //监听类型值
            typeOptions: [
                {key: "默认", value: "normal"},
                {key: "外部链接", value: "url"},
                {key: "内部链接", value: "inner"},
                {key: "发现", value: "find"},
                {key: "商户", value: "mcht"}
            ],
            docList: [], //文章列表
            mchtList:[], //商户列表
            stateOptions: [
                {key: "正常", value: "0"},
                {key: "关闭", value: "1"}
            ]
        }),
        watch: {
            typeValue(v){
                this.tpe = v;
                if(v == 'normal'){
                    $("input[name='linkUrl']").attr("disabled", true);
                    $("#linkDocId").attr("disabled",true);
                }
                if (v == "url") {
                    $(this.$els.form.linkUrl).rules("add", {
                        url: true
                    });
                }else{
                    $(this.$els.form.linkUrl).rules("remove", "url");
                }
                if(v == 'mcht'){
                    this.getMcht();
                }
            }
        },
        methods: {
            reset() {
                $("label.error").remove();
                this.$els.form.reset()
            },
            getDoc(data) {
                let self = this;
                self.$post({
                    url: "/api/v1" + projectName_Url + "/list/doc/query/0",
                    method: "GET"
                }).then(response => {
                    let list = response.content.info;
                    self.$set("docList", list);
                    self.docIdValue = list[0].value;
                }, error => {
                });
            },
            getMcht(data) {
                let self = this;
                var mchtId = JSON.parse(localStorage.getItem("id_token")).mchtId
                self.$post({
                    url: "/api/v2" + projectName_Url + "/list/mcht/"+ mchtId,
                    method:"GET"
                }).then(response => {
                    let list = response.content.info;
                    this.mchtList = list;
                    self.$set("mchtList", list);
                    self.mchtIdValue = list[0].value
                }, error => {});
            }
        },
        ready() {
            dateTime()
            var self = this;
            $(this.$els.form).validate({
                submitHandler: async function (form) {
                    let formData = new FormData(form)
                    loading(true);
                    var result = await self.$post({
                        url: "/api/v1" + projectName_Url + "/plat/banner/add",
                        data: formData,
                        method: "POST"
                    }).then(response => {
                        let data = {
                            title: "操作成功",
                            content: "是否进入广告列表查看?"
                        }
                        self.reset();
                        Midway.confirm(data).then(function () {
                            self.$route.router.go('/adviertisement/list');
                        })
                    }).then(() => loading(false)).catch(() => loading(false))
                },
                errorPlacement: function (error, element) {
                    if (element.attr("name") == "file") {
                        error.insertAfter(".file-item");
                    } else {
                        error.insertAfter(element)
                    }
                },
                rules: {
                    name: {
                        required: true,
                        maxlength:25
                    },
                    seq: {
                        digits: true,
                        required: true,
                        min: 1,
                        maxlength: 3,
                        minlength: 1
                    },
                    file: {
                        required: true
                    },
                    about: {
                        maxlength:75
                    },
                    linkType: {
                        required: true
                    },
                    linkUrl: {
                        maxlength:122,
                        url: true
                    },
                    linkDocId:{

                    }
                },
                messages: {
                    file: {
                        required: "请选择附件"
                    },
                    linkUrl: {
                        url: "请输入以http://开始的正确网址"
                    }
                }
            });

            $("#linkType").change(function () {
                //设置关联链接只有在内外部链接时才编辑
                $("input[name='linkUrl']").attr("disabled", $(this).val() != 'url'&& $(this).val() != 'inner').val("");
                //设置关联文章只有在发现时可编辑
                $("#linkDocId").attr("disabled", $(this).val() != 'find').val("");
                //类型是发现时调关联文章接口
                if($("#linkType").val() == "find"){
                    self.getDoc();
                }else{
                    $("#linkDocId").prop("disabled", true);
                }
            })
        }
    }
</script>
